import React from 'react';
import { ArticleListItem } from '@/interfaces/article';
import ArticleCard from './ArticleCard';

interface RelatedArticlesProps {
  currentArticleId: string;
}

const mockRelatedArticles: ArticleListItem[] = [
  {
    id: '2',
    title: 'Building Beautiful UIs with Tailwind CSS',
    excerpt: 'Discover how to create stunning user interfaces using Tailwind CSS utility classes.',
    author: 'Jane Smith',
    publishDate: '2024-01-10',
    tags: ['CSS', 'Design', 'Tailwind'],
    category: 'Design',
    readTime: 8,
    coverImage: 'https://via.placeholder.com/400x200'
  },
  {
    id: '3',
    title: 'TypeScript Best Practices',
    excerpt: 'Learn advanced TypeScript patterns and best practices for large-scale applications.',
    author: 'Mike Johnson',
    publishDate: '2024-01-05',
    tags: ['TypeScript', 'JavaScript', 'Best Practices'],
    category: 'Development',
    readTime: 12,
  },
  {
    id: '4',
    title: 'Modern CSS Grid Layouts',
    excerpt: 'Master CSS Grid to create complex, responsive layouts with ease.',
    author: 'Sarah Wilson',
    publishDate: '2024-01-03',
    tags: ['CSS', 'Grid', 'Layout'],
    category: 'Design',
    readTime: 6,
    coverImage: 'https://via.placeholder.com/400x200'
  }
];

const RelatedArticles: React.FC<RelatedArticlesProps> = ({ currentArticleId }) => {
  // Filter out current article and limit to 3
  const relatedArticles = mockRelatedArticles
    .filter(article => article.id !== currentArticleId)
    .slice(0, 3);

  if (relatedArticles.length === 0) {
    return null;
  }

  return (
    <section className="bg-ios-gray-50 dark:bg-ios-gray-800 py-12">
      <div className="max-w-4xl mx-auto px-4">
        <h2 className="text-2xl font-bold text-ios-gray-900 dark:text-white mb-8">
          Related Articles
        </h2>
        
        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {relatedArticles.map((article) => (
            <div key={article.id} className="transform hover:scale-105 transition-transform duration-200">
              <ArticleCard article={article} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default RelatedArticles;